<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>以图搜图</title>

    <!-- 样式 -->
    <link rel="stylesheet" href="css/style.css">
    <script src="js/script.js"></script>
    <script src="/js/jszip.min.js"></script>
    <script src="/js/FileSaver.min.js"></script>
</head>
<body>
<div class="container">
    <div id="top-action-bar">
        <div class="header">
            <h1>智富以图搜图</h1>
            <button class="upload-btn" onclick="batchDownload()">批量下载</button>
            <button class="upload-btn" onclick="batchDelete()">批量删除</button>
            <button class="upload-btn" onclick="openUploadModal('single')">上传单张图片</button>
            <button class="upload-btn" onclick="openUploadModal('folder')">上传多张图片</button>
            <button class="upload-btn" onclick="openUploadModal('zip')">上传zip文件</button>
            <button  onclick="openSearchModal()">搜索相似图片</button>
        </div>
    </div>
    <!-- 查询条件 -->
    <div class="form-group">
        <div class="form-item">
            <label for="search-name">图片名称</label>
            <input type="text" id="search-name" placeholder="输入图片名称">
        </div>
        <div class="form-item">
            <label for="pageIndex">页码</label>
            <input type="number" id="pageIndex" value="1">
        </div>
        <div class="form-item">
            <label for="pageSize">每页大小</label>
            <input type="number" id="pageSize" value="10">
        </div>


    </div>
    <button onclick="fetchImages()">查询</button>

    <!-- 图片列表 -->
    <ul id="image-list-items" class="image-list"></ul>

    <!-- 分页导航 -->
    <div class="pagination">
        <button onclick="fetchImages(1)" id="first-page" >首页</button>
        <button onclick="fetchImages(currentPage - 1)" id="prev-page">上一页</button>
        <span id="page-info"></span>
        <button onclick="fetchImages(currentPage + 1)" id="next-page" >下一页</button>
        <button onclick="fetchImages(totalPages)" id="last-page" >末页</button>
    </div>
</div>

<!-- 上传单张图片模态框 -->
<div id="upload-single-modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeUploadModal('single')">&times;</span>
        <h2>上传单张图片</h2>
        <div class="form-group">
            <div class="form-item">
            <label for="file-single-modal">选择图片文件</label>
            <input type="file" id="file-single-modal" accept="image/*">
        </div>
        </div>
        <button onclick="uploadSingleImage('single')">上传</button>
        <div id="message-single-modal" class="alert"></div>
        <ul id="single-upload-modal" class="image-list"></ul>
    </div>
</div
><!-- 上传文件夹模态框 -->
<div id="upload-folder-modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeUploadModal('folder')">&times;</span>
        <h2>上传文件夹</h2>
        <div class="form-group">
            <div class="form-item">
            <label for="file-single-modal">选择文件夹</label>
            <input type="file" id="file-folder-modal" webkitdirectory directory>
        </div>
    </div>
        <button onclick="uploadFolderImage('folder')">上传</button>
        <div id="message-folder-modal" class="alert"></div>
    </div>
</div>

<!-- 上传zip文件模态框 -->
<div id="upload-zip-modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeUploadModal('zip')">&times;</span>
        <h2>上传zip文件</h2>
        <div class="form-group">
            <div class="form-item">
            <label for="file-zip-modal">选择zip文件</label>
            <input type="file" id="file-zip-modal" accept=".zip">
        </div>
        </div>
        <button onclick="uploadZipFile('zip')">上传</button>
        <div id="message-zip-modal" class="alert"></div>

    </div>
</div>

<div id="imagePreviewModal" style="display: none; position: fixed; top: 0; left: 0;
     width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7);transform: scale(1.5);
    align-items: center; justify-content: center; z-index: 9999;"  onclick="closePreview()">
    <div style="position: relative;">
        <img id="previewImage" src="" alt="预览图" style="max-width: 90vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 0 10px #000;">
    </div>
</div>
<!-- 搜索相似图片模态框 -->
<div id="search-modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeSearchModal()">&times;</span>
        <h2>搜索相似图片</h2>
        <div class="form-group">
            <input type="file" id="file-search-modal" accept="image/*" onchange="handleFileChange(event)">
        </div>

        <div class="form-group">
            <div class="form-item">
                <label for="topK-modal">返回结果数量</label>
                <input type="number" id="topK-modal" value="5">
            </div>
        </div>
        <button onclick="searchImages('search')">搜索</button>
        <div id="message-search-modal" class="alert"></div>

        <ul id="results-modal" ></ul>
    </div>
</div>
<div id="loadingSpinner" class="loading-overlay" style="display: none;">
    <div class="spinner"></div>
</div>

</body>
</html>